<template>
	<view class="hvacLayout">
		<view class="hvacLeft border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ hvl_title }}
				</view>
				<view class="hleft_echart">
					<uni-echarts ref="echartshl" :option="optionLValue" canvasId="echartshl"></uni-echarts>
				</view>
			</view>
		</view>
		<view class="hvacRight border_box">
			<view class="border_inner">
				<view class="global-visualization-box-head">{{ hvr_title }}
				</view>
				<view class="hvac-right-container" v-if="true">
					<div id="hvac-right-content" class="fright_echart">
						<svg class="svg" width="100%" height="100%" id="svg_dataP">
							<!--1 布线-->
							<template v-for="item in pointsArray">
								<polyline :points="item" />
								<polyline class="flow" :points="item" />
							</template>
							<!--2 图标-->
							<defs>
								<template v-for="i in 7">
									<pattern :id="'tvoc' + (i - 1)" width="100%" height="100%"
										patternUnits="objectBoundingBox">
										<image :width="hwValue" :height="hwValue"
											:href="'http://portal.xumengte.com/homeImg/tvoc/' + (i - 1) + '.png'" />
									</pattern>
								</template>
							</defs>
							<template v-for="(item, i) in imagesArray">
								<rect :x="item[0]" :y="item[1]" :width="hwValue" :height="hwValue" rx="4" ry="4"
									:style="{ fill: 'url(#tvoc' + i + ')' }" />
							</template>

							<template v-for="(item, i) in textsArray">
								<text :x="item[0]" :y="item[1]">{{ textData[i] }}℃</text>
							</template>
						</svg>
					</div>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import moment from "moment";
	import store from '@/store/index.js';
	import * as echarts from 'echarts';
	import $config from '@/common/config.js';
	import request from '@/common/request.js';
	const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
	import UniEcharts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {
		optionHCLValue
	} from "@/common/hvac_echart_data.js";
	export default {
		components: {
			UniEcharts
		},
		data() {
			return {
				hvl_title: '暖通能耗数据(最近24小时)',
				hvr_title: '暖通运行状态图',
				optionLValue: {},
				screenFont: 12,
				pointsArray: [],
				hwValue: 36,
				textsArray: [],
				imagesArray: [],
				textData: [26.1, 24.5, 20.5, 18.6, 18.4, 21.7, 23.2, 23.4],
				svgDocument: {},
				sDataArray: [0, 0, 0, 0, 0],
				xDataArray: [1, 2, 3, 4, 5],
			}
		},
		mounted() {
			let hvacIndex = 1;
			this.optionLValue = optionHCLValue;
			this.drawHVAC();
			// window.addEventListener('resize', this.resizeCanvas, false);
			this.svgDocument = document.getElementById('svg_dataP');

			for (let i = 0; i < 7; i++) {
				var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
				image.setAttribute("x", this.imagesArray[i][0]);
				image.setAttribute("y", this.imagesArray[i][1]);
				image.setAttribute("width", this.hwValue);
				image.setAttribute("height", this.hwValue);
				image.setAttribute("href", "http://portal.xumengte.com/homeImg/tvoc/" + i + ".png");
				this.svgDocument.appendChild(image);
			}

			let textStyle = 'text-anchor: middle; font-family: 微软雅黑; font-size: 10px; fill: white;text-decoration: none;'

			for (let i = 0; i < this.textsArray.length; i++) {
				var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
				text.setAttribute("x", this.textsArray[i][0]);
				text.setAttribute("y", this.textsArray[i][1]);
				text.setAttribute("style", textStyle);
				text.appendChild(document.createTextNode(this.textData[i] + '℃'));
				this.svgDocument.appendChild(text);
			}
			if (store.state.hasLogin) {
				this.logMulti()
			}
		},
		methods: {
			resizeCanvas() {
				var svg = document.getElementById('svg_dataP');
				console.log(svg);
				this.drawHVAC();
			},
			drawHVAC() {
				let contentH = document.getElementById('hvac-right-content').clientHeight;

				let contentW = document.getElementById('hvac-right-content').clientWidth;

				let intervalX = contentW / 7;

				let intervalY = contentH / 2.6;

				let offsetX = intervalX / 4;

				let offsetY = intervalY / 10;

				let imageW = this.hwValue;

				let imageH = this.hwValue;

				//图片坐标
				let c = [
					[offsetX + intervalX + imageW / 2, offsetY + imageH / 2],
					[offsetX + intervalX * 3 + imageW / 2, offsetY + imageH / 2],
					[offsetX + intervalX * 4 + imageW / 2, offsetY + imageH / 2],
					[offsetX + imageW / 2, offsetY + imageH / 2 + intervalY],
					[offsetX + intervalX * 2 + imageW / 2, offsetY + imageH / 2 + intervalY],
					[offsetX + intervalX * 5 + imageW / 2, offsetY + imageH / 2 + intervalY],
					[offsetX + intervalX * 6 + imageW / 2, offsetY + imageH / 2 + intervalY],
				];

				this.imagesArray = c.map((item) => {
					return [item[0] - imageW / 2, item[1] - imageH / 2];
				});

				console.log(c);
				let off1 = this.hwValue / 8;
				this.pointsArray = [
					[c[3][0], c[3][1] - imageH / 2, c[3][0], c[3][1] - intervalY, c[0][0] - imageW / 2, c[0][1]],
					[c[0][0] + imageW / 2, c[0][1], c[4][0] - off1, c[4][1] - intervalY, c[4][0] - off1, c[4][1] -
						imageH / 2
					],
					[c[4][0] + off1, c[4][1] - imageH / 2, c[4][0] + off1, c[4][1] - intervalY, c[1][0] - imageW / 2,
						c[1][1]
					],
					[c[1][0] + imageW / 2, c[1][1], c[2][0] - imageW / 2, c[2][1]],

					[c[5][0], c[5][1] - intervalY, c[5][0], c[5][1] - imageH / 2],
					[c[2][0] + imageW / 2, c[2][1], c[6][0], c[6][1] - intervalY, c[6][0], c[6][1] - imageH / 2],

					[c[1][0], c[1][1] + imageH / 2, c[1][0], c[1][1] + intervalY * 2],

					[c[5][0], c[5][1] + imageH / 2, c[5][0], c[5][1] + intervalY],
					[c[6][0], c[6][1] + imageH / 2, c[6][0], c[6][1] + intervalY, c[4][0] + off1, c[4][1] + intervalY,
						c[4][0] + off1, c[4][1] + imageH / 2
					],

					[c[4][0] - off1, c[4][1] + imageH / 2, c[4][0] - off1, c[4][1] + intervalY, c[3][0], c[3][1] +
						intervalY, c[3][0], c[3][1] + imageH / 2
					],
				];

				this.textsArray = [
					[c[3][0] + imageW / 2 + 10, c[3][1] + imageH / 1.2],
					[c[3][0] + imageW / 2 + 10, c[3][1] - imageH / 1.6],
					[c[4][0] - imageW, c[4][1] - imageH / 1.2 + 10],
					[c[4][0] - imageW, c[4][1] + 5],
					[c[4][0] - imageW, c[4][1] + imageH / 1.2],
					[c[4][0] + imageW - 5, c[4][1] + imageH / 0.7 - 10],
					[c[1][0] - imageW - 5, c[1][1] - imageH / 4],
					[c[1][0] + imageW / 1.2 + 6, c[1][1] - imageH / 4],
				];
			},
			logMulti() {
				let that = this;
				let postData = {
					timeType: 'hour', //最近一周
					startTime: moment().startOf('hour').add(-24, 'hour').format(DATE_TIME_FORMAT),
					endTime: moment().startOf('hour').format(DATE_TIME_FORMAT),
					projectId: $config.pcode,
					deviceId: 'HPS_kWh',
				};
				let headerdata = {
					"content-type": "application/json"
				};
				request.postRaw('/jeecgboot/device/data/logMulti', headerdata, postData).then(resData => {
					console.log('resData==>>', resData);
					if (resData.code == 200) {
						let resultData = resData.result;
						if (resultData && resultData[0]) {
							console.log(resultData, '**************res*******************')
							that.xDataArray = resultData[0].range.map((item) => {
								return item.substring(11) + '时';
							});
							that.sData1Array =
								resultData[0].data.length > 0 ?
								resultData[0].data.map((item) => {
									if (item) {
										return item.power?.toFixed(2)
									}
									return item?.slice(-1)[0]?.power?.toFixed(2) || 0;
								}) : [0, 0, 0, 0, 0, 0];
							that.optionLValue.xAxis[0].data = that.xDataArray;
							that.optionLValue.series[0].data = that.sData1Array;
						}
					}
				}).catch(errData => {
					console.log('errData==env>>', errData)
				});
			},
		},
	}
</script>
<style>
	@import 'index.css';
</style>
